import React from 'react';
import { Form, Input } from 'antd';
import { FormInstance } from 'antd/es/form/Form';
import { QueryFilterForm } from '@/components/SelfComp';
import { QueryFormProps } from '@/types/global';
import { basicFormItemLangLayout } from '@/utils/commons';

export type ParamQueryProps = QueryFormProps & {

}

const FormItem = Form.Item;
/**
 * 参数查询表单
 */
const ParamQueryForm: React.FC<ParamQueryProps> = (props) => {

  const formRef = React.createRef<FormInstance>();

  /**
   * 表单提交
   */
  const onSubmit = () => {
    // 收集表单数据
    // 传递回父组件
    // 感叹号! 断言
    const fieldsValue = formRef.current!.getFieldsValue();
    console.info(fieldsValue);
    const values = {
      ...fieldsValue
    };
    console.log('Received values of form: ', values);
    const {onSubmit} = props;
    if (onSubmit) {
      onSubmit({
        ...values
      });
    }
  }

  const onReset = () => {
    formRef.current!.resetFields();
    const { onReset } = props;
    if (onReset) {
      onReset();
    }
  }

  const { colon, loading } = props;
  const formItemLayout = basicFormItemLangLayout;

  return (
    <QueryFilterForm
      colon={colon}
      loading={loading}
      onSubmit={onSubmit}
      onReset={onReset}
    >
      <FormItem label='参数名称' name='paramName' {...formItemLayout} colon={colon}>
        <Input placeholder='支持模糊查询'/>
      </FormItem>
      <FormItem label='参数键名' name='paramKey' {...formItemLayout} colon={colon}>
        <Input />
      </FormItem>
    </QueryFilterForm>
  );
}

export default ParamQueryForm